import 'dart:math';
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ImplicitAnimationPage extends StatefulWidget {
  final int tagPage;
  final String title;

  const ImplicitAnimationPage(
      {Key? key, required this.tagPage, required this.title})
      : super(key: key);

  @override
  _ImplicitAnimationPageState createState() => _ImplicitAnimationPageState();
}

class _ImplicitAnimationPageState extends State<ImplicitAnimationPage> {
  Widget _widget = Container();

  @override
  Widget build(BuildContext context) {
    switch (widget.tagPage) {
      case 0:
        _widget = _animationOne();
        break;
      case 1:
        _widget = _animationTwo();
        break;
      case 2:
        _widget = _animationWidgetCurves();
        break;
      case 3:
        _widget = _animationOne();
        break;
      case 4:
        _widget = _animationOne();
        break;
      case 5:
        _widget = _animationOne();
        break;
      case 6:
        _widget = _animationOne();
        break;
    }

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title,
            style: const TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold)),
      ),
      body: Container(
        constraints: const BoxConstraints.expand(),
        child: _widget,
      ),
    );
  }

  double widthOne = 100.0;
  double heightOne = 100.0;
  Color _colorOne = Colors.blue;
  double circular = 0;

  // "1，两行代码就能动起来",
  Widget _animationOne() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(children: [
          const SizedBox(width: 5),
          MaterialButton(
              color: Colors.black38,
              child: const Text(
                "增加长宽",
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () => setState(() {
                    widthOne += 100.0;
                    heightOne += 100.0;
                  })),
          MaterialButton(
              color: Colors.black38,
              child: const Text(
                "减小长宽",
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () => setState(() {
                    widthOne -= 100.0;
                    heightOne -= 100.0;
                  })),
          MaterialButton(
              color: Colors.black38,
              child: const Text(
                "变颜色",
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () => setState(() {
                    Random random = Random();
                    int a = random.nextInt(255);
                    int r = random.nextInt(255);
                    int g = random.nextInt(255);
                    int b = random.nextInt(255);
                    _colorOne = Color.fromARGB(a, r, g, b);
                  })),
          MaterialButton(
              color: Colors.black38,
              child: const Text(
                "变成圆的",
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () =>
                  setState(() => circular = circular == 0 ? widthOne / 2 : 0)),
        ]),
        AnimatedContainer(
          height: heightOne,
          width: widthOne,
          duration: const Duration(seconds: 1),
          decoration: BoxDecoration(
              color: _colorOne,
              borderRadius: BorderRadius.all(Radius.circular(circular))),
        )
      ],
    );
  }

// "2，在不同控件之间切换的过渡动画",
  bool switchStr = false;
  int animationMode = 0;

  Widget _animationTwo() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        MaterialButton(
          color: Colors.orange,
          onPressed: () => setState(() {
            switchStr = !switchStr;
            animationMode = 0;
          }),
          child: const Text("文字渐变切换"),
        ),
        MaterialButton(
          color: Colors.orange,
          onPressed: () => setState(() {
            switchStr = !switchStr;
            animationMode = 1;
          }),
          child: const Text("文字旋转切换"),
        ),
        MaterialButton(
          color: Colors.orange,
          onPressed: () => setState(() {
            switchStr = !switchStr;
            animationMode = 2;
          }),
          child: const Text("缩小放大显式"),
        ),
        MaterialButton(
          color: Colors.orange,
          onPressed: () => setState(() {
            switchStr = !switchStr;
            animationMode = 3;
          }),
          child: const Text("三种动画组合"),
        ),
        AnimatedContainer(
          width: 300,
          color: Colors.blue,
          height: 300,
          duration: const Duration(seconds: 1),
          child: AnimatedSwitcher(
            transitionBuilder: (child, animated) {
              switch (animationMode) {
                case 0:
                  return FadeTransition(
                    opacity: animated,
                    child: child,
                  );
                case 1:
                  return RotationTransition(
                    turns: animated,
                    child: child,
                  );
                case 2:
                  return ScaleTransition(
                    scale: animated,
                    child: child,
                  );
                case 3:
                  return ScaleTransition(
                    scale: animated,
                    child: FadeTransition(
                      opacity: animated,
                      child: RotationTransition(
                        turns: animated,
                        child: child,
                      ),
                    ),
                  );
              }
              return child;
            },
            duration: const Duration(seconds: 2),
            child: Text(
              switchStr ? "我乃常山赵子龙" : "我的大刀早已饥渴难耐",
              key: UniqueKey(),
              style: const TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
            ),
          ),
        )
      ],
    );
  }

// "3，更多动画控件及曲线（Curves）",
  bool animatedOpacityBool = false;
  bool animatedPaddingBool = false;
  Curve curve = Curves.linear;

  Widget _animationWidgetCurves() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        MaterialButton(
          color: Colors.orange,
          onPressed: () => setState(() {
            animatedOpacityBool = !animatedOpacityBool;
          }),
          child: const Text("将图片变成透明和还原"),
        ),
        AnimatedOpacity(
          opacity: animatedOpacityBool ? 1.0 : 0.2,
          duration: const Duration(seconds: 2),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
        Row(
          children: [
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.linear;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("曲线动画默认(linear)"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.bounceIn;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("bounceIn"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.bounceOut;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("bounceOut"),
            ),
          ],
        ),
        Row(
          children: [
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.bounceInOut;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("bounceInOut"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.decelerate;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("decelerate"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.ease;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("ease"),
            ),
          ],
        ),
        Row(
          children: [
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.easeIn;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("easeIn"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.easeInBack;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("easeInBack"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.easeInCubic;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("easeInCubic"),
            ),
          ],
        ),
        Row(
          children: [
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.slowMiddle;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("slowMiddle"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.fastOutSlowIn;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("fastOutSlowIn"),
            ),
            MaterialButton(
              color: Colors.orange,
              onPressed: () => setState(() {
                curve = Curves.elasticInOut;
                animatedPaddingBool = !animatedPaddingBool;
              }),
              child: const Text("elasticInOut"),
            ),
          ],
        ),
        AnimatedPadding(
          curve: curve,
          padding:
              EdgeInsets.only(left: 20, top: animatedPaddingBool ? 10 : 100),
          duration: const Duration(seconds: 1),
          child: Container(
            width: 50,
            height: 50,
            decoration: const BoxDecoration(
                color: Colors.redAccent,
                borderRadius: BorderRadius.all(Radius.circular(25))),
          ),
        )
      ],
    );
  }

// "4,内置的还不够？万能的补间动画",
// "5，实例（上）：翻滚吧！计数器！",
// "6.实例（下）：一枚动画控件的诞生"

}
